<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户表单</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
</head>
<body>

<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top:25px; ">
        <input type="text" id="id" style="display: none; "/>
        <div class="layui-inline">
            <label class="layui-form-label" >姓名</label>
            <div class="layui-input-inline" style="width:220px; ">
                <input type="text" id="userName" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" >账号</label>
            <div class="layui-input-inline" style="width:220px; ">
                <input type="text" id="userNumber" autocomplete="off" class="layui-input" />
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin-top:15px; ">
        <div class="layui-inline">
            <label class="layui-form-label" >密码</label>
            <div class="layui-input-inline" style="width:220px; ">
                <input type="text" id="userPassword" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" >身份</label>
            <div class="layui-input-inline" style="width:220px;">
                <input type="radio" name="userType" value="0" title="用户">
                <input type="radio" name="userType" value="1" title="管理员">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-input-inline" style="margin-left: 350px; ">
                <button type="button" class="layui-btn" lay-submit="" onclick="submitForm()">保存</button>
            </div>
        </div>
    </div>
</form>

<script src="/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" th:inline="none">
    layui.use(['element','form','layer'], function(){
        let element = layui.element;
        let form = layui.form;
        let layer = layui.layer;
        let type = null;

        //加载用户信息
        $(function(){
            setTimeout(function(){
                let id = $('#id').val();
                if(id != null && id !== ''){
                    $.ajax({
                        type: "POST",
                        url: '/manager/getUserById?id=' + id,
                        contentType: "application/json",
                        success: function (data) {
                            let obj = JSON.parse(data);
                            $('#userName').val(obj['userName']);
                            $('#userNumber').val(obj['userNumber']);
                            $('#userPassword').val(obj['userPassword']);
                            $("input:radio[value='"+obj['userType']+"']").attr('checked','true');
                            type = obj['userType'];
                            //更新渲染
                            form.render();
                        }
                    });
                }
            },1*1000);
        });


        //表单保存提交
        submitForm = function () {
            let obj = {};
            obj["userName"] = $('#userName').val();
            obj["userNumber"] = $('#userNumber').val();
            obj["userPassword"] = $('#userPassword').val();
            obj["userType"] = $("input[name='userType']:checked").val();
            let checkPass = true;
            for(let item in obj){
                if(obj[item] == null || obj[item] === ''){
                    checkPass = false;
                }
            }
            // alert(type);
            // alert(obj["userType"]);
            if(checkPass === true){
                let re = /^[0-9]*$/;
                if(!re.test(obj["userNumber"])){
                    layer.msg("账号处请输入数字");
                }
                else if(type != obj["userType"]){
                    layer.msg("无权更改用户类型");
                }
                else{
                    obj["id"] = $('#id').val();
                    $.ajax({
                        type: "POST",
                        url: '/manager/saveUser',
                        data: JSON.stringify(obj),
                        contentType: "application/json",
                        success: function (data) {
                            if(data === 'success'){
                                parent.setRefreshFlag(true);
                                let index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            }else if(data === 'numberRepeat'){
                                layer.msg("该账号已被使用")
                            }
                        }
                    });
                }
            }else{
                layer.msg('请输入完整信息');
            }
        }



    });
</script>
</body>
</html>